<template>
	<div class="tabel_Background">
		<div class="button1" @click="handleHome()">
			上一级
		</div>
		<div class="tabel_Background-wra">
			<div class="title-wra">
				<div id="title">
					<span class="title-text">{{ title }}</span>
				</div>
			</div>
			<div class="select">
				<div class="select1-wra">
					<div class="select1" style="width:100%">
						<span class="time-cls">时间分布</span>
						<el-select size="mini" clearable style="width:100%;marginTop:1%;height:60%" v-model="value1"
						 :popper-append-to-body="false">
							<el-option v-for="item in timeDistribution" :key="item.value" :label="item.label" :value="item.label">
							</el-option>
						</el-select>
					</div>
					<div class="time-type-wra" style="margin-left: 7%;width: 100%;">
						<div class="time-type" v-if="value1 === '年'">
							<el-date-picker v-model="data.yearstr" value-format="yyyy" type="year" placeholder="请选择年份" @change="editPicker" />
						</div>
						<div class="time-type" v-if="value1 === '年+上半年/下半年'">
							<HalfYear @func="getHalfYear" />
						</div>
						<div class="time-type" v-if="value1 === '年+季度'">
							<Quarter @func="getQuarter" />
						</div>
						<div class="time-type" v-if="value1 === '年+月'">
							<el-date-picker v-model="value5" value-format="yyyyMM" type="month" placeholder="请选择月份" @change="editPicker1" />
						</div>
					</div>
				</div>
				<div class="select1">
					<span class="time-cls">工艺分布</span>
					<el-select size="mini" clearable style="width:100%;marginTop:1%;height:60%" v-model="data.craft"
					 :popper-append-to-body="false">
						<el-option v-for="item in craftDistribution" :key="item.value" :label="item.label" :value="item.label">
						</el-option>
					</el-select>
				</div>
				<div class="select1 select2">
					<span class="time-cls">井深分布</span>
					<el-select size="mini" clearable style="width:100%;color: greenyellow;;marginTop:1%;height:60%" v-model="data.depth"
					 :popper-append-to-body="false">
						<el-option v-for="item in depthDistribution" :key="item.value" :label="item.label" :value="item.label">
						</el-option>
					</el-select>
				</div>
				<div class="select1" style="margin-right: 5%;">
					<span class="time-cls">井斜分布</span>
					<el-select size="mini" clearable style="width:100%;marginTop:1%;height:60%" v-model="data.deg"
					 :popper-append-to-body="false">
						<el-option v-for="item in degDistribution" :key="item.value" :label="item.label" :value="item.label">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="line2" />
			<div class="table-wra">
				<el-table :data="listData" style="width: 100%" height='100%' :header-cell-style="{ 'text-align': 'center' }"
				 :cell-style="{ 'text-align': 'center' }" @row-click="rowClick" :row-class-name="rowClass">
					<el-table-column prop="wellName" label="井号">
						<template slot-scope="scope">
							<span style="text-decoration: underline;">{{scope.row.wellName}}</span>
							<!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
						</template>
					</el-table-column>
					<!-- width="150" -->
					<el-table-column prop="craft" label="工艺"> </el-table-column>
					<!-- width="120" -->
					<el-table-column prop="poEdate" label="日期"> </el-table-column>
					<!-- width="140" -->
					<el-table-column prop="depth" label="井深"> </el-table-column>
					<!-- width="120" -->
					<el-table-column prop="deg" label="井斜"> </el-table-column>
					<!-- width="100" -->
					<el-table-column prop="chargeType" label="射孔弹"> </el-table-column>
					<!-- width="120" -->
				</el-table>
			</div>

		</div>
	</div>
</template>

<script>
	import {
		getWell,
		getWellArea
	} from "@/api/index";
	import HalfYear from "./HalfYear.vue";
	import Quarter from "./Quarter.vue";
	export default {
		name: "AnalyzeData",
		props: {
			title: String
		},
		components: {
			HalfYear,
			Quarter
		},
		data() {
			return {
				data: {
					wellname: "",
					yearstr: "",
					yearhalf: "",
					quarterid: "0",
					monthstr: "",
					craft: "",
					depth: "",
					deg: ""
				},
				data1: {
					wellname: "",
					yearstr: "",
					yearhalf: "",
					quarterid: "0",
					monthstr: "",
					craft: "",
					depth: "",
					deg: ""
				},
				clickIndex: '',
				listData: [
					// { wellName: "111", craft: "222" },
					// { wellName: "111", craft: "222" }
				],
				timeDistribution: [{
						value: "选项1",
						label: "年"
					},
					{
						value: "选项2",
						label: "年+上半年/下半年"
					},
					{
						value: "选项3",
						label: "年+季度"
					},
					{
						value: "选项4",
						label: "年+月"
					}
				],
				value1: "",
				value5: "",
				villageForm: {
					pubBizInterval: ""
				},
				craftDistribution: [{
						value: "选项1",
						label: "切割"
					},
					{
						value: "选项2",
						label: "连续油管输送"
					},
					{
						value: "选项3",
						label: "电缆传输"
					},
					{
						value: "选项4",
						label: "带压穿孔"
					},
					{
						value: "选项5",
						label: "射孔加砂测试联作"
					},
					{
						value: "选项6",
						label: "倒灰"
					},
					{
						value: "选项7",
						label: "分簇射孔"
					},
					{
						value: "选项8",
						label: "射孔酸化测试联作"
					},
					{
						value: "选项9",
						label: "爬行器输送"
					},
					{
						value: "选项10",
						label: "钻具传输"
					},
					{
						value: "选项11",
						label: "电缆桥塞"
					},
					{
						value: "选项12",
						label: "油管输送"
					},
					{
						value: "选项13",
						label: "爆炸松扣"
					}
				],
				depthDistribution: [{
						value: "选项1",
						label: "3000以下"
					},
					{
						value: "选项2",
						label: "3000~5000"
					},
					{
						value: "选项3",
						label: "5000~6000"
					},
					{
						value: "选项4",
						label: "6000~7000"
					},
					{
						value: "选项5",
						label: "7000以上"
					}
				],
				degDistribution: [{
						value: "选项1",
						label: "30°以下"
					},
					{
						value: "选项2",
						label: "30°~68°"
					},
					{
						value: "选项3",
						label: "68°~96°"
					},
					{
						value: "选项4",
						label: "96°~105°"
					},
					{
						value: "选项5",
						label: "105°以上"
					}
				]
			};
		},

		watch: {
			data: {
				handler(newData, oldData) {
					this.clickIndex = '';
					this.getWellInfor(newData);
					this.$bus.$emit("analyzeChoose", newData);
				},
				deep: true
			},
			value1: {
				handler(newData, oldData) {
					if (newData == "") {
						this.data.yearstr = "";
						this.data.yearhalf = "";
						this.data.quarterid = "0";
						this.data.monthstr = "";
					}
					// console.log("监听事件", newData, this.data);
				},
				deep: true
			}
		},

		methods: {
			rowClass({
				row,
				rowIndex
			}) {
				row.index = rowIndex;
				if (this.clickIndex === rowIndex) {
					return "tableActive";
				}
			},
			rowClick(val) {
				this.clickIndex = val.index;
				console.log("获取到的表格数据", val);
				// console.log("获取到的表格数据", val.wellName);
				// this.setSessionItem("anaDataChange", val);
				this.$bus.$emit("wellNameChoose", val.wellName);
				// sessionStorage.removeItem('wellName');
			},
			editPicker(val) {
				console.log(val);
				this.data.wellname = "";
				this.data.yearhalf = "";
				this.data.quarterid = "0";
				this.data.monthstr = "";
				console.log(this.data);
			},

			editPicker1(val) {
				console.log(val);
				this.data.wellname = "";
				this.data.yearhalf = "";
				this.data.quarterid = "0";
				this.data.yearstr = val.substring(0, 4);
				this.data.monthstr = val.substring(4, 6);
				console.log(this.data);
			},

			getQuarter(val) {
				console.log(val);
				this.data.yearhalf = "";
				this.data.monthstr = "";
				this.data.wellname = "";
				if (val.substring(5, 9) == "第一季度") {
					this.data.yearstr = val.substring(0, 4);
					this.data.quarterid = "1";
					// this.villageForm.pubBizInterval =
					// 	val.substring(0, 4) + "-" + "4" + "-" + "15";
				} else if (val.substring(5, 9) == "第二季度") {
					this.data.yearstr = val.substring(0, 4);
					this.data.quarterid = "2";
					// this.villageForm.pubBizInterval =
					// 	val.substring(0, 4) + "-" + "7" + "-" + "15";
				} else if (val.substring(5, 9) == "第三季度") {
					this.data.yearstr = val.substring(0, 4);
					this.data.quarterid = "3";
					// this.villageForm.pubBizInterval =
					// 	val.substring(0, 4) + "-" + "10" + "-" + "15";
				} else if (val.substring(5, 9) == "第四季度") {
					this.data.yearstr = val.substring(0, 4);
					this.data.quarterid = "4";
					// this.villageForm.pubBizInterval = parseInt(
					// 	val.substring(0, 4) + parseInt(1) + "-" + "1" + "-" + "15"
					// );
				}
				// console.log(9999, this.villageForm);
			},
			getHalfYear(val) {
				console.log(val);
				this.data.quarterid = "0";
				this.data.monthstr = "";
				this.data.wellname = "";
				if (val.substring(5, 9) == "上半年") {
					this.data.yearstr = val.substring(0, 4);
					this.data.yearhalf = "上半年";
					// this.villageForm.pubBizInterval = val.substring(0, 4) + "-" + "上半年";
				} else if (val.substring(5, 9) == "下半年") {
					this.data.yearstr = val.substring(0, 4);
					this.data.yearhalf = "下半年";
					// this.villageForm.pubBizInterval = val.substring(0, 4) + "-" + "下半年";
				}
			},
			async getWellInfor(val) {
				const {
					data: res
				} = await getWell(val);
				let wellInfor = res.data.map((item) => {
					// console.log(item);
					item.deg = item.deg + '°';
					item.depth = item.depth + 'm';
					return item;
				});
				// console.log(wellInfor);
				this.listData = wellInfor;
			},

			async getWellAreaInfor(val) {
				const {
					data: res
				} = await getWellArea(val);
				let wellInfor1 = res.data.map((item) => {
					// console.log(item);
					item.deg = item.deg + '°';
					item.depth = item.depth + 'm';
					return item;
				});
				// console.log(wellInfor1);
				this.listData = wellInfor1;
			},

			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex % 2 == 1) {
					return "warning-row";
				} else if (rowIndex % 2 == 0) {
					return "success-row";
				}
				return "";
			},

			handleHome(val) {
				this.$router.replace("/");
			}
		},

		mounted() {
			// this.getWellInfor(this.data);
			if (sessionStorage.getItem("wellName") || sessionStorage.getItem("yearstr")) {
				if (!sessionStorage.getItem("wellName") && sessionStorage.getItem("yearstr")) {
					this.data1.wellname = '';
					this.data1.yearstr = sessionStorage.getItem("yearstr");
				} else if (!sessionStorage.getItem("yearstr") && sessionStorage.getItem("wellName")) {
					this.data1.wellname = sessionStorage.getItem("wellName");
					this.data1.yearstr = '';
				} else if (sessionStorage.getItem("yearstr") && sessionStorage.getItem("wellName")) {
					this.data1.wellname = sessionStorage.getItem("wellName");
					this.data1.yearstr = sessionStorage.getItem("yearstr");
				}
				// sessionStorage.removeItem("yearstr");
				this.clickIndex = 0;
				this.getWellInfor(this.data1);
			} else if (sessionStorage.getItem("localtionData")) {
				console.log(JSON.parse(sessionStorage.getItem("localtionData")))
				let localtionData1 = JSON.parse(sessionStorage.getItem("localtionData"));
				this.getWellAreaInfor(localtionData1);
				// sessionStorage.removeItem("localtionData");
			} else {
				this.getWellInfor(this.data);
			}
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	.tabel_Background {
		width: 76%; //3.02rem;
		// min-width: 2.96rem;
		height: 100%;
		box-sizing: border-box;
	}

	.tabel_Background-wra {
		width: 100%; //3.02rem;
		min-width: 2.96rem;
		height: 100%;
		// border: 1px solid rgb(12, 50, 107);
		background-image: url("../../assets/bg2@2x.png");
		// background-image: url('./../../../assets/mobile/pre-share-page@2x.png');
		background-repeat: no-repeat;
		background-size: 100% 100%; // contain; // cover;
		padding: 2%;
		box-sizing: border-box;
	}

	.title-wra {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 5%;
	}

	#title {
		width: 23%; //3.02rem;
		height: 100%;
		min-width: 2.96rem;
		text-align: center;
		font-size: 6px;
		background-image: url("../../assets/title_outline@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; //cover;
		position: relative;
	}

	.title-text {
		position: absolute;
		left: 5%;
		top: 17%;
		color: #21beeb;
		font-weight: bold;
	}

	/* 横线 */
	.line {
		// float:right;
		width: 76%;
		height: 1px;
		margin-top: 3px;
		margin-left: 8.5px;
		// background: #3b8ce2;
		position: relative;
		text-align: center;
		background-image: linear-gradient(to right,
			rgb(2, 39, 103),
			#0bb6ff,
			rgb(2, 39, 103));
		overflow: hidden;
	}

	.select {
		width: 100%;
		// background-color: wheat;
		height: 15%;
		margin-top: 1.5%;
		color: #39deff;
		font-size: 8px;
		display: flex;
		justify-content: space-between;
	}

	.select1-wra {
		width: 17%;
		margin-left: 5%;
		height: 100%;
	}

	.select1 {
		// float: left;
		width: 17%;
		margin-left: 3%;
		height: 100%;
		// background-color: red;
		border: 1px solid rgb(12, 50, 107);
		background-image: url("../../assets/bg_fxsj@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: #a9deee;

		.time-cls {
			// margin-top: 3%;
			display: inline-block;
			font-size: 250%;
			color: #50cbfc;
		}

		/deep/ .el-select-dropdown__item {
			//单独设置时间分布下拉框字体大小
			font-size: 8px;
			height: 30px;
			line-height: 30px;
		}

		/deep/.el-input__inner {
			font-size: 18px;
			color: #03d5fa;
			padding: 0;
			width: 100%;
			height: 100%;
		}

		/deep/.el-input--mini {
			height: 100%;
		}

		/deep/.el-select-dropdown__wrap {
			max-height: 120px;
		}
	}

	.select2 {
		/deep/.el-input__inner {
			color: #1efe3c;
		}
	}

	// 设置输入框的背景色、字体颜色、边框属性设置；
	/deep/.el-input__inner {
		// background-color: rgba(255, 255, 255, 0.100);
		// background-color: red;
		background: transparent !important;
		color: #14adff;
		width: 92px;
		height: 20px;
		margin-top: 3px;
		text-align: center;
		border: 0px;
		font-family: Roboto;
		font-style: normal;
		font-weight: normal;
		font-size: 8px;
		line-height: 14px;
	}

	// 注意：此时一定要在 <el-select> 里添加 :popper-append-to-body="false" 属性；
	// 若未加入 :popper-append-to-body="false" 属性，那么此时渲染后的 DOM 元素不在 #app 元素内部；
	// 原因: el-select 里面的 select-popper 元素渲染后会脱离 #app ,因此使用深度选择器也无法定位该元素;

	// 设置下拉框的背景颜色及边框属性；
	/deep/.el-select-dropdown {
		// 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；
		// 因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示；
		background-color: rgb(2, 39, 103);
		border: 0px;
		// width: 76px;
		text-align: center;
	}

	/**宽度修改 */
	/deep/ .el-select {
		// width: 100%;
		// background-color: red;
		text-align: center;
	}

	/deep/ .el-input__suffix {
		right: 8%;
	}

	/deep/ .el-input__suffix-inner {
		// display: none;
	}

	// 设置下拉框的字体属性及背景颜色；
	.el-select-dropdown__item {
		font-size: 7px;
		line-height: 19px;
		height: 15px;
		color: #14adff;
		width: 100%;
		font-weight: 200;
		background-color: rgba(255, 255, 255, 0.1);
	}

	// 设置下拉框列表的 padding 值为：0；(即：样式调整)
	/deep/.el-select-dropdown__list {
		padding: 0;
	}

	// 设置输入框与下拉框的距离为：0; (即：样式调整)
	/deep/.el-popper[x-placement^="bottom"] {
		margin-top: 0px;
	}

	// 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头)
	/deep/.el-popper .popper__arrow,
	/deep/.el-popper .popper__arrow::after {
		display: none;
	}

	// 设置鼠标悬停在下拉框列表的悬停色；
	.el-select-dropdown__item:hover {
		background-color: #3381fe;
	}

	/* 横线 */
	.line2 {
		// float:right;
		width: 100%;
		height: 1px;
		margin-top: 2%;
		// margin-left: 8.5px;
		// background: #3b8ce2;
		position: relative;
		text-align: center;
		// background-image: linear-gradient(
		//   to right,
		//   rgb(2, 39, 103),
		//   #0bb6ff,
		//   rgb(2, 39, 103)
		// );
		background: #0e4982;
		overflow: hidden;
	}


	/deep/ .el-input--prefix .el-input__inner {
		padding: 0;
		width: 100%;
	}

	/deep/.el-input__prefix {
		top: -4px;
	}

	.button1 {
		width: 4%;
		height: 4%;
		background-image: url("../../assets/btn_leibie_pressed@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 5.5%;
		left: 2%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		color: #fff;
	}

	.table-wra {
		height: 70%;

		// background-color: red;
		/deep/ .el-table {
			background-color: transparent;
			color: #fff;
		}

		/deep/ .el-table::before {
			height: 0;
		}

		/deep/ .el-table thead {
			color: #50cbfc;
		}

		/deep/ .el-table tr {
			background: transparent;
		}

		/deep/ .el-table th.el-table__cell.is-leaf {
			border-bottom: none;
		}

		/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
			background: #ff0000; //transparent改为#0c2947
			cursor: pointer;
		}

		/deep/ .el-table th.el-table__cell {
			background-color: #063666;
		}

		/deep/ .el-table td.el-table__cell {
			border-bottom: none;
		}

		/deep/ .el-table__row:nth-of-type(odd) {
			background: #0c2947;
		}

		/deep/ .tableActive {
			background: #217cb4 !important;
		}

		/deep/ .el-table__body-wrapper {
			margin-top: 0%;
		}

		/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
			background: transparent;
			cursor: pointer;
		}
	}
</style>

<style lang="less">
	.el-picker-panel {
		background: #124694;
		border: none;
	}

	.el-date-picker__header-label {
		color: #fff;
	}

	.el-year-table td .cell,
	.el-month-table td .cell {
		color: #fff;
	}
</style>
